﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>权限管理</title>
<link href="../../../css/layout.css" rel="stylesheet" type="text/css" />
<link href="../../../css/cb.css" rel="stylesheet" type="text/css" />
<link href="../../../css/n.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="../../../easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../../easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../../easyui/demo/demo.css" />
<script type="text/javascript" src="../../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../js/vue/vue.min.js"></script>
<script type="text/javascript" src="../../../js/laypage/laypage.js"></script>
<link rel="stylesheet" href="../../../js/ztree/demo.css" type="text/css">
<link rel="stylesheet" href="../../../js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="../../../js/ztree/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="../../../js/echart/echarts.min.js"></script>
<script type="text/javascript" src="../../../laydate/laydate.js"></script>
</head>
<body>
<!-- echarts -->
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="../../../images/b2.jpg"><img
				src="../../../images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="../../../images/b2.jpg"><table width="124"
					border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="../../../images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">方法执行耗时统计</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="../../../images/b2.jpg"><img
				src="../../../images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<table width="80%" border="0" cellspacing="1" cellpadding="3">
					<tr>
						<td width="70%" align="left">
							<div id="main" style="width: 1500px;height:300px;"></div>	
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

<!-- 表格数据 -->
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="../../../images/b2.jpg"><img
				src="../../../images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="../../../images/b2.jpg"><table width="124"
					border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="../../../images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">查找日志信息</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="../../../images/b2.jpg"><img
				src="../../../images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4">
		<tr>
			<td align="center" bgcolor="#E2F7FE">
				<form id="form_log" name="form1">
					<table width="99%" border="0" cellspacing="1" cellpadding="3">
						<tr>
							<td width="10%" align="right">用户名称:</td>
							<td width="10%" align="left">
								<input name="username" type="text" id="username" size="15" />
							</td>
							<td width="10%" align="right">IP地址:</td>
							<td width="10%" align="left">
								<input name="ip" type="text" id="ip" size="15" />
							</td>
							<td width="10%" align="right">开始时间:</td>
							<td width="10%" align="left">
								<input name="starttime" type="text" id="starttime" size="15" class="laydate-icon" onclick="laydate()"/>
							</td>
							<td width="10%" align="right">结束时间:</td>
							<td width="10%" align="left">
								<input name="endtime" type="text" id="endtime" size="15" class="laydate-icon" onclick="laydate()"/>
							</td>
							<td width="10%" align="left">
								<input type="button" name="query" value="查找" onclick="queryEvent()"/>
							</td>
							<td width="50%" colspan="3" align="right">
								<input type="button" name="export" value="导出Excle" onclick="exportEvent()"/>
								<input type="button" id ="monitor" name="monitor" value="实时监控" />
							</td>
						</tr>
					</table>
				</form>
			</td>
		</tr>
	</table>
	
	<table width="50%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="5"></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left" background="../../../images/b2.jpg"><img
				src="../../../images/b1.jpg" width="10" height="26" /></td>
			<td width="68%" background="../../../images/b2.jpg"><table width="124"
					border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left"><img src="../../../images/tz.gif"
							width="10" height="16" /></td>
						<td width="104" align="left" class="biao">系统日志列表</td>
					</tr>
				</table></td>
			<td width="31%" align="right" background="../../../images/b2.jpg"><img
				src="../../../images/b3.jpg" width="9" height="26" /></td>
		</tr>
	</table>
	<table width="99%" border="0" align="center" cellpadding="3"
		cellspacing="1" bgcolor="#AEDEF4" style="border: 1px solid #AEDEF4" id="app">
		<tr>
			<td width="5%" height="25" align="center" bgcolor="#EFFBFE">序号</td>
			<td align="center" bgcolor="#EFFBFE">用户名称</td>
			<td align="center" bgcolor="#EFFBFE">客户端IP</td>
			<td align="center" bgcolor="#EFFBFE">客户端MAC</td>
			<td align="center" bgcolor="#EFFBFE">访问URL</td>
			<td align="center" bgcolor="#EFFBFE">访问方式</td>
			<td align="center" bgcolor="#EFFBFE">执行类名</td>
			<td align="center" bgcolor="#EFFBFE">执行方法</td>
			<td align="center" bgcolor="#EFFBFE">运行耗时</td>
			<td align="center" bgcolor="#EFFBFE">日志时间</td>
			<td align="center" bgcolor="#EFFBFE">操作</td>
		</tr>
		<tr onmouseout="this.style.backgroundColor='#ffffff'"
			bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#E6F2FF'" v-for="(item,index) in result">

			<td height="25" align="center"><input name="id[]" value=""
				type="checkbox" />{{index+1}}</td>
			<td align="center" class="t5"><div align="center">
					<strong>{{item.usename}}</strong>
				</div></td>
			<td align="center">{{item.ip}}</td>
			<td align="center">{{item.mac}}</td>
			<td align="center">{{item.url}}</td>
			<td align="center">{{item.type}}</td>
			<td align="center">{{item.classname}}</td>
			<td align="center">{{item.method}}</td>
			<td align="center">{{item.time}}</td>
			<td align="center">
			{{new Date(item.createtime).toLocaleString()}}
			</td>
			<td align="left">
				<div align="left" style="padding-left: 5px">
					<div align="center">
						<input type="button" @click="delEvent(item.id)" name="" value="删除" />
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="7" align="center">
				<div id="pagenav"></div>
			</td>
		</tr>
	</table>
</body>
<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));
var option = {
    title : {
        text: '资源耗时监控',
        subtext: '最新100条日志'
    },
    tooltip : { 
        trigger: 'axis'
    },
    legend: {
        data:['资源耗时']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : []
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} ms'
            }
        }
    ], 
    series : [
        {
            name:'资源耗时',
            type:'line',
            showSymbol: false,
        	hoverAnimation: false,
            data:[],
            markPoint : { 
                symbolSize:50,  
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
           	itemStyle : { 
           		color:'#00FF00',
                normal : {  
                    lineStyle:{  
                        color:'#01FFFF'  
                    }  
                }  
            }
        }
    ]
};

  // 使用刚指定的配置项和数据显示图表。
  //myChart.setOption(option);
$(function(){
	var iCount=null;
	$('#monitor').click(function(){
		if(iCount!=null){
			$('#monitor').val("实时监控");
			clearInterval(iCount);
		}else{
			iCount=setInterval(getData, 3000);
			$('#monitor').val("监控中...");
		}
	});
	function getData(){
		$.ajax({
			type : "get",
			data:{
				"pageNum":1,
				"pageSize":100,
			},
			dataType : "json",
			url : "/syslog/echarts",
			success : function(result) {
				if(result.data!=null){
		         option.xAxis[0].data = result.data[0]; 
		         option.series[0].data = result.data[1]; 
		         myChart.hideLoading();
		         myChart.setOption(option); 
		        }
			}
		});
	}
	getData();
});



//vuejs
var app = new Vue({
	el : '#app',
	data : {
		result : []
	}
});



//查询角色数据
var getPageList = function(curr) {
	$.ajax({
		type : "post",
		dataType : "json",
		url : "/syslog/search",
		data : {
			"username":$('#username').val(),
			"ip":$('#ip').val(),
			"starttime":$('#starttime').val(),
			"endtime":$('#endtime').val(),
			"pageNum":curr || 1,
			"pageSize":10
		},
		success : function(msg) {
			app.result = msg.data[0].list;
			laypage({
				cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
				pages :msg.data[0].pages, //总页数
				first : "首页",
				last : "尾页",
				skip : true, //是否开启跳页
				skin : '#5675A2',
				curr : curr || 1, //当前页
				jump : function(obj, first) { //触发分页后的回调
					if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
						getPageList(obj.curr);
					}
				}
			});
		}
	});
}

//页面加载，查询日志
getPageList();

//模糊查询日志事件
var queryEvent=function(){
	getPageList();
}

//删除日志
	var delEvent = function(id) {	
		$.messager.confirm('提示框', '你确定要删除吗?',function(res){
			if(res){
				//确认删除
				$.ajax({
					url:"/syslog/doDel",
					data:{"id":id},
					type:"get",
					datatype:"json",
					success:function(result){
						$.messager.alert({
							title : '消息',
							msg : result.message,
							icon : 'info'
						});
						getPageList();//更新分页
					}
				});
			}else{
				//取消删除
			}
		});
	}
	//导出excel
	function exportEvent(){
		window.open("/syslog/excel");
	}
</script>
</html>